<script type="text/javascript">
	  
	$(document).ready(function(){      
		
		$("#overall_err").hide();

	  	$("#login").bind('click', function(){
			$("#login-loading").show();
			$.post('ajax/registration/login.php', { uname: $('#uname').val(), pword: $('#pword').val() }, function(data){
				$("#overall_err").slideUp();
				if(data=="ok"){
					setLoggedIn();
					$("#login-loading").hide();
					$("#overall_err").slideUp();
					fetchPage('forum');
				} else {
					setLoggedOut()
					$("#login-loading").hide();
					$("#overall_err").slideDown();
					$("#side-innertext").html(data);
					$("#overall_err").effect("shake", { times:2, distance:5, direction:'left' }, 100);	
				}
			});
		});
		
		reassert("#reg-link");
	});
</script>
<h2>Login</h2>
<p>
		<div id="overall_err">
            <div class="ui-widget"> 
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
                    <p><span id="innertext"></span></p> 
                </div> 
            </div> 
         </div>

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><strong>Username:</strong></td>
    <td><input style="width:150px;" class="reg" id="uname" type="text"></td>
  </tr>
  <tr>
    <td><strong>Password:</strong></td>
    <td><input style="width:150px;" class="reg" id="pword" type="password"></td>
  </tr>
  <tr>
    <td id="no_border">&nbsp;</td>
    <td id="no_border"><input class="submit-box" style="width:100px; float:left;" id="login" type="button" value="take me home!"><div id="login-loading" class="loading-small"></div></td>
  </tr>
</table>
</p>
<h2>Register</h2>
<p>Not signed up? Then lets <a id="reg-link" href="#reg">register</a>!</p>
